<template>
  <!-- {{ curList }} -->
  <div>
    <div class="searcharea" slot="head">
      <label class="search-item">
        <el-input
          id="search"
          placeholder="Search"
          prefix-icon="el-icon-search"
          v-model="searchKey"
          @keyup.native="filterList"
          @keyup.enter.native="fetchList"
        >
        </el-input>
      </label>
      <el-button
        class="search-item"
        type="primary"
        size="small"
        icon="el-icon-search"
        style="width: 90px"
        >Search
      </el-button>
      <el-button
        class="search-item"
        type="primary"
        size="small"
        icon="el-icon-circle-plus-outline"
        style="width: 70px"
        @click="showAddForm(true)"
        >Add
      </el-button>

      <el-select
        v-model="statusOptionValue"
        clearable
        placeholder="Status"
        style="width: 100px"
        @change="statusSelect"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <el-table
      slot="down"
      :data="curList"
      height="500px"
      border
      style="width: 100%"
      :row-style="{ height: '20px' }"
    >
      <el-table-column prop="name" label="name"> </el-table-column>
      <el-table-column prop="gentime" label="gentime" width="140">
        <div slot-scope="scope">{{ scope.row.gentime | formatTime }}</div>
      </el-table-column>
      <el-table-column prop="status" label="status" width="80">
      </el-table-column>
      <el-table-column prop="srouce" label="srouce" width="80">
      </el-table-column>
      <el-table-column prop="handleby" label="handleby" width="100">
      </el-table-column>
      <el-table-column prop="progress" label="progress"> </el-table-column>
      <el-table-column prop="record" label="record"> </el-table-column>
      <el-table-column label="Operation" width="100">
        <template slot-scope="scope">
          <i @click="clickEditRow(scope.row)" class="el-icon-edit"></i>
          <i
            @click="deleteRow(scope.$index, curList)"
            class="el-icon-delete"
          ></i>
        </template>
      </el-table-column>
    </el-table>
    <editForm
      v-if="editFormVisible"
      :formVisible="editFormVisible"
      @formVisibleEvent="showEditForm"
      :formData="formData"
    >
    </editForm>
    <addForm
      v-if="addFormVisible"
      :addFormVisible="addFormVisible"
      @dialogVisibleEvent="showAddForm"
    ></addForm>
  </div>
</template>

<script>
// import { fetchAlarmHis, removeRecord } from "@/api/alarm.js";
import editForm from "@/components/common/list-ADUQ/editForm.vue";
import addForm from "@/components/common/list-ADUQ/addForm.vue";

export default {
  name: "AlarmRecord",
  data() {
    let list = [];
    storeList = this.$store.state.alarmRecordList;
    storeListSave = this.$store.state.alarmRecordListSave;
    return {
      addFormVisible: false,
      editFormVisible: false,
      curList: this.storeList,
      listForSave: this.storeListSave,
      searchKey: "",
      formData: {},
      statusOptionValue: [
        {
          value: "Open",
          label: "Open",
        },
        {
          value: "Pending",
          label: "Pending",
        },
        {
          value: "Closed",
          label: "Closed",
        },
      ],
    };
  },
  components: {
    addForm,
    editForm,
  },
  created() {
    fetchAlarmHis().then((response) => {
      this.curList = response.data;
    });
  },
  filters: {
    formatTime(value) {
      let newTime =
        value.substr(0, 4) +
        "/" +
        value.substr(5, 2) +
        "/" +
        value.substr(8, 2) +
        " " +
        value.substr(11, 2) +
        ":" +
        value.substr(14, 2);
      return newTime;
    },
  },
  watch: {
    curList(val) {
      this.$store.state.alarmRecordList = val;
    },
  },
  methods: {
    statusSelect(item) {
      console.log("item :>> ", item);
      if (this.listForSave.length == 0) {
        this.listForSave = this.curList.slice(0);
      } else {
        this.curList = this.listForSave.slice(0);
      }
      for (let index = 0; index < this.curList.length; index++) {
        let str = JSON.stringify(this.curList[index].status);
        console.log("str :>> ", str);
        if (str.indexOf(item) === -1) {
          this.curList.splice(index, 1);
          index = index - 1;
        }
      }
    },
    showEditForm(visible) {
      this.editFormVisible = visible;
    },
    showAddForm(visible) {
      this.addFormVisible = visible;
    },

    deleteRow(index, rows) {
      let r = confirm("Confirm to remove the record?");
      if (r == true) {
        removeRecord(rows[index].alarmid)
          .then((response) => {
            rows.splice(index, 1);
            this.$store.state.alarmRecordListSave = rows;
            this.$store.state.alarmRecordList = rows;
            this.$notify({
              title: "Success",
              message: "Record remove success!",
              type: "success",
              duration: 4,
            });
          })
          .catch((err) => {
            this.$notify.error({
              title: "Error",
              message: "Record remove failed!",
            });
          });
      }
    },
    clickEditRow(row) {
      this.showEditForm(true);
      this.formData = row;
    },
    fetchList() {
      console.log("start search alarm");
    },
    filterList() {
      if (this.listForSave.length == 0) {
        this.listForSave = this.curList.slice(0);
      } else {
        this.curList = this.listForSave.slice(0);
      }
      for (let index = 0; index < this.curList.length; index++) {
        let str = JSON.stringify(this.curList[index]);
        if (str.indexOf(this.searchKey) === -1) {
          // console.log(str);
          this.curList.splice(index, 1);
          index = index - 1;
        }
      }
    },
  },
};
</script>

<style>
.searcharea {
  display: flex;
}

.test {
  text-align: center;
}
</style>